// 默认偏移数量
let limit = 40;
// 偏移初始量
let offset = 0;
// 开始的页码
let pageid = 0;
// 上一页
let prev;
// next页
let next;
// 最后一页
let last;
// 声明一个最大页
let maxpage;
// 声明一个标签
let tag = '全部';
chkLis(pageid);
// 不同标签使用时间
Ajax({
    url: 'http://localhost:3000/playlist/highquality/tags',
    params: {

    },
    type: 'get',
}).then(function (res) {
    // console.log(res.tags);

    // 根据不同种类的category，分别生成不同的数组
    const zeroLis = Array.from(res.tags).filter(function (item, index) {
        return item.category == 0
    })
    const oneLis = Array.from(res.tags).filter(function (item, index) {
        return item.category == 1
    })
    const twoLis = Array.from(res.tags).filter(function (item, index) {
        return item.category == 2
    })
    const threeLis = Array.from(res.tags).filter(function (item, index) {
        return item.category == 3
    })
    const fourLis = Array.from(res.tags).filter(function (item, index) {
        return item.category == 4
    })
    // 测试获取到的数据
    // console.log(zeroLis);
    // console.log(twoLis);
    // console.log(threeLis);
    // console.log(fourLis);
    // console.log(fiveLis);

    let selectOps0 = template('selectOps0', {
        data: zeroLis,
    });
    let selectOps1 = template('selectOps1', {
        data: oneLis,
    });
    let selectOps2 = template('selectOps2', {
        data: twoLis,
    })
    let selectOps3 = template('selectOps3', {
        data: threeLis,
    });
    let selectOps4 = template('selectOps4', {
        data: fourLis,
    });
    // languages
    const langes =  document.querySelector('.langes');
    langes.innerHTML = selectOps0;
    // styles
    const styles =  document.querySelector('.styles');
    styles.innerHTML = selectOps1;
    // scene
    const scene =  document.querySelector('.scene');
    scene.innerHTML = selectOps2;
    // emotion
    const emotion =  document.querySelector('.emotion');
    emotion.innerHTML = selectOps3;
    // theme
    const theme =  document.querySelector('.theme');
    theme.innerHTML = selectOps4;
    // 循环绑定事件，请求数据
    
    // 获取列表中的元素，分别绑定点击事件
    const langesLis = document.querySelectorAll('.toast0');
    const stylesLis = document.querySelectorAll('.toast1');
    const sceneLis = document.querySelectorAll('.toast2');
    const emotionLis = document.querySelectorAll('.toast3');
    const themeLis = document.querySelectorAll('.toast4');
    // console.log(langesLis)
    // console.log(stylesLis)
    // console.log(sceneLis)
    // console.log(emotionLis)
    // console.log(themeLis)
    $(".praise").attr("disabled",true).css("pointer-events","none"); 

    // 获取要替换的标签名
    const songAll = document.querySelector('.song-all');
    Array.from(langesLis).forEach(function (item, index) {
        item.addEventListener('click', function (evt) {
            tag = this.dataset.cat;
            songAll.innerHTML = this.dataset.cat;
            chkLis(pageid);
            show();
        })
    })
    Array.from(stylesLis).forEach(function (item, index) {
        item.addEventListener('click', function (evt) {
            tag = this.dataset.cat;
            songAll.innerHTML = this.dataset.cat;
            chkLis(pageid);
            show();
        })
    })
    Array.from(sceneLis).forEach(function (item, index) {
        item.addEventListener('click', function (evt) {
            tag = this.dataset.cat;
            songAll.innerHTML = this.dataset.cat;
            chkLis(pageid);
            show();
        })
    })
    Array.from(emotionLis).forEach(function (item, index) {
        item.addEventListener('click', function (evt) {
            tag = this.dataset.cat;
            songAll.innerHTML = this.dataset.cat;
            chkLis(pageid);
            show();
        })
    })
    Array.from(themeLis).forEach(function (item, index) {
        item.addEventListener('click', function (evt) {
            tag = this.dataset.cat;
            songAll.innerHTML = this.dataset.cat;
            chkLis(pageid);
            show();
        })
    })
})


// 绑定事件函数，方便页面分页开始
function chkLis(pageid) {
    Ajax({
        url: 'http://localhost:3000/top/playlist',
        params: {
            limit: limit,
            offset: limit * pageid,
            cat: tag,
        },
        type: 'get',
    }).then(function resolve(res) {
        // console.log(res.playlists);
        console.log(res);
        // 计算出最大页码
        maxpage = Math.ceil(res.total / limit);

        // 初始化 渲染数据 默认第1页
        // 渲染页码栏
        // 计算页码栏
        // 这里的页码栏是每次获取limit+offset的数据量
        prev = pageid - 1;
        if (prev < 1) prev = 1;

        //循环页码加1，并且判断最否达到最大页 
        next = pageid + 1;
        if (next > maxpage) next = maxpage;

        // console.log(maxpage - 1)
        last = maxpage - 1;
    
        let pager = new Map([
            ['首页', 0],
            ['上页', prev],
            ['下页', next],
            ['尾页', maxpage -1]
        ]);

        // 页面开始展示渲染
        template.defaults.imports.dateFormat = function (date, format) {
            var num = date / 10000;
            return num + '万';
        };
        let tpl = template('tpl', {
            data: res.playlists,
        });
        const fcb = document.querySelector('.album');
        fcb.innerHTML = tpl;
        let page = template('page', {
            pager,
        });
        const fpage = document.querySelector('.pageation');
        fpage.innerHTML = page;

        // 开始为每个精品歌单设置点击事件
        fcb.addEventListener('click', function (evt) {
            if(evt.target.classList.contains('ellip')) {
                // console.log(evt.target.dataset.id)
                evt.target.href = evt.target.href + "?" + evt.target.dataset.id;
            }
        })

        $('body,html').animate({
            scrollTop: 0
        },20);
    })
}
// 关闭toast框，使得隐藏
function show () {
    let songlist = document.querySelector('.n-sltlyr');
    songlist.classList.remove('_showdow');
}